<template>
  <div class="box1">
    <div class="left">
      <div class="box2">
        <div class="top">
          <p>客户资料/{{ formInline.user }}</p>
        </div>
        <div class="under">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px" label-position="top">
            <el-row gutter="20" style="margin-top: 20px;">
              <el-col :span="8">
                <el-form-item label="客户姓名"
                  style="margin-left: 20px; margin-bottom: 0; color: black; font-style: italic;">
                  <el-input v-model="formInline.user" placeholder="请输入客户姓名" clearable style="width:280px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号码" style="font-style: italic;">
                  <el-input v-model="formInline.phone" placeholder="请输入手机号码" clearable style="width:280px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职业" style="font-style: italic;">
                  <el-select v-model="formInline.job" placeholder="请选择" clearable style="width:280px">
                    <el-option v-for="item in jobList" :key="item.value" :label="item.dictLabel"
                      :value="item.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row gutter="20" style="margin-top: 10px;">
              <el-col :span="8">
                <el-form-item label="学历" style="margin-left: 15px; font-style: italic;">
                  <el-select v-model="formInline.xueli" placeholder="请选择" clearable style="width:280px">
                    <el-option v-for="item in xueliList" :key="item.value" :label="item.dictLabel"
                      :value="item.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所在地区" style="font-style: italic;">
                  <el-select v-model="formInline.region" placeholder="请选择" clearable style="width:280px">
                    <!-- <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" /> -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信号码" style="font-style: italic;">
                  <el-input v-model="formInline.phone" placeholder="请输入手机号码" clearable style="width:280px" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row gutter="20" style="margin-top: 10px;">
              <el-col :span="8">
                <el-form-item label="年龄" style="margin-left: 15px; font-style: italic;">
                  <el-input-number v-model="num1" :min="6" placeholder="6" @change="handleChange" style="width:280px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QQ" style="font-style: italic;">
                  <el-input v-model="formInline.owner" placeholder="请输入手机号码" clearable style="width:280px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" style="font-style: italic;">
                  <el-select v-model="formInline.sex" clearable style="width:280px">
                    <el-option v-for="item in sexList" :key="item.value" :label="item.dictLabel"
                      :value="item.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row gutter="20" style="margin-top: 10px;">
              <el-col :span="8">
                <el-form-item label="身高" style="margin-left: 15px; font-style: italic;">
                  <el-input-number min="60.0" v-model="num2" placeholder="60.00" @change="handleChange"
                    style="width:280px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="体重" style="margin-left: 10px; font-style: italic;">
                  <el-input-number min="30.0" v-model="nu3" placeholder="30.00" @change="handleChange"
                    style="width:290px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="备注" style="margin-bottom: 0; font-style: italic;">
                  <el-input v-model="formInline.remarks" placeholder="备注" clearable style="width:280px" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="box3">
        <div class="top">
          <p>客户意见</p>
        </div>
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px" label-position="top">
            <el-row gutter="20" style="margin-top: 10px;">
              <el-col :span="8">
                <el-form-item label="意向类型" style="margin-left: 15px; font-style: italic;">
                  <el-select v-model="formInline.intention" placeholder="课程分类" clearable style="width:280px">
                    <el-option v-for="item in intentionList" :key="item.value" :label="item.dictLabel"
                      :value="item.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="意向课程" style="font-style: italic;">
                  <el-select v-model="formInline.intentionCourse" placeholder="请选择" clearable style="width:280px">
                    <el-option v-for="item in intentionCourseList" :key="item.value" :label="item.name"
                      :value="item.courseId" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="健康原因" style="font-style: italic;">
                  <el-input v-model="formInline.sex1" placeholder="健康原因" clearable style="width:280px" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row gutter="20" style="margin-top: 10px;">
              <el-col :span="8">
                <el-form-item label="每周健身时间" style="margin-left: 15px; font-style: italic;">
                  <el-input-number min="60.0" placeholder="6" @change="handleChange" style="width:280px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="意向金额" style="margin-left: 10px; font-style: italic;">
                  <el-input-number min="30.0" placeholder="1.00" @change="handleChange" style="width:290px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="其他意向" style="margin-bottom: 0; font-style: italic;">
                  <el-input v-model="formInline.sex2" placeholder="" clearable style="width:280px" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

      </div>
      <div class="box4">
        <div class="top">
          <p>沟通记录</p>
        </div>
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px" label-position="top">
            <el-row gutter="20" style="margin-top: 10px;">
              <el-col :span="8">
                <el-form-item label="跟进状态" style="margin-left: 15px; font-style: italic;">
                  <el-select v-model="formInline.followUp" clearable style="width:340px">
                    <el-option v-for="item in followUpList" :key="item.value" :label="item.dictLabel"
                      :value="item.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="下次跟进时间" style="font-style: italic;">
                  <div class="demo-datetime-picker">
                    <el-date-picker v-model="formInline.createTime" type="datetime" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="沟通重点" style="font-style: italic;">
                  <el-select v-model="formInline.communication" placeholder="请选择" clearable style="width:280px">
                    <el-option v-for="item in communicationList" :key="item.value" :label="item.dictLabel"
                      :value="item.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="25">
                <el-form-item label="沟通纪要"
                  style="margin-left: 15px; margin-top: 10px; margin-bottom: 0; color: black; font-style: italic;">
                  <el-input v-model="formInline.sex3" clearable class="inp" />
                </el-form-item>
              </el-col>
              <el-col style="margin-top: 40px; margin-left: 710px;">
                <el-form-item>
                  <div>
                    <el-button style="width: 60px;" @click="goToindex">返回</el-button>
                    <el-button style="width: 60px;" type="primary" @click="handleSave">保存</el-button>
                    <el-button style="width: 100px;" type="success" @click="goToindex">转为成交客户</el-button>
                  </div>
                </el-form-item>

              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <p>商机跟进记录</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { xueli, sex, followUp, intention, communication, intentionCourse, job } from "@/api/business/details";
import { reactive, ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const value1 = ref('');
const num = ref(1);
const router = useRouter();
const route = useRoute();

const formInline = reactive({
  user: '',
  owner: '',
  createTime: '', // 创建时间
  weixin: '',    // 微信
  qq: '',         // QQ
  phone: '',
  job: '',        // 职业
  xueli: '',      // 学历
  sex: '',        // 性别
  followUp: '',   // 跟进状态
  intention: '',  // 意向类型
  intentionCourse: '', // 意向课程
  communication: '',   // 沟通重点
  region: '',     // 所在地区
});

const onSubmit = () => {
  console.log('submit!');
}
// 日期选择器
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      return date;
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 7);
      return date;
    },
  },
]

onMounted(() => {
  getXueli();
  getsex()
  getFollowUp()
  getIntention()
  getCommunication()
  getIntentionCourse()
  getJob()
  if (route.query.name) formInline.user = route.query.name as string;
  if (route.query.phone) formInline.phone = route.query.phone as string;
  if (route.query.weixin) formInline.weixin = route.query.weixin as string;
  if (route.query.qq) formInline.qq = route.query.qq as string;
  if (route.query.createTime) formInline.createTime = route.query.createTime as string;
  if (route.query.owner) formInline.owner = route.query.owner as string;
})

// 学历下拉框渲染
const xueliList = ref([]);
function getXueli() {
  xueli(1).then((res) => {
    xueliList.value = res.data;
  });
}
// 性别接口
const sexList = ref([]);
function getsex() {
  sex().then((res) => {
    sexList.value = res.data;
  })
}
// 跟进状态接口
const followUpList = ref([]);
function getFollowUp() {
  followUp().then((res) => {
    // console.log(res, "跟进状态");
    followUpList.value = res.data;
  })
}
// 意向类型接口
const intentionList = ref([]);
function getIntention() {
  intention().then((res) => {
    // console.log(res, "意向类型");
    intentionList.value = res.data;
  })
}
// 沟通重点接口
const communicationList = ref([]);
function getCommunication() {
  communication().then((res) => {
    // console.log(res, "沟通重点");
    communicationList.value = res.data;
  })
}
// 意向课程
const intentionCourseList = ref([]);
function getIntentionCourse() {
  intentionCourse().then((res) => {
    // console.log(res, "意向课程");
    intentionCourseList.value = res.data;
  })
}
// 职业接口
const jobList = ref([]);
function getJob() {
  job().then((res) => {
    console.log(res, "职业");
    jobList.value = res.data;
  })
}

// 跳转到管理页面

function goToindex() {
  router.push('/business');
}

function handleSave() {
  if ((formInline.remarks && formInline.remarks.trim() !== '') || (formInline.communication && formInline.communication !== '')) {
    router.push('/business');
  } else {
    ElMessage.error('跟踪记录不能为空');
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.box1 {
  display: flex;
  justify-content: space-around;
  /* width: 986px; */
  height: 1002px;
  /* background-color: red; */
  margin: 10px 0px;
}

.box2 {
  width: 986px;
  height: 390px;
  /* background-color: blue; */
  box-shadow: var(--el-box-shadow-light);
  margin-bottom: 40px;
}

.top {
  width: 100%;
  height: 42px;
  /* background-color: red; */
  border-bottom: 1px solid #e4e7ed;
}

.top p {
  line-height: 50px;
  margin-left: 10px;
}

.box3 {
  width: 986px;
  height: 222px;
  /* background-color: blue; */
  box-shadow: var(--el-box-shadow-light);
  margin-bottom: 40px;
}

.box4 {
  width: 986px;
  height: 296px;
  /* background-color: blue; */
  box-shadow: var(--el-box-shadow-light);
}

.right {
  width: 310px;
  height: 79px;
  /* background-color: red; */
  box-shadow: var(--el-box-shadow-light);
}

.demo-form-inline .el-input {
  --el-input-width: 280px;
}

.demo-form-inline .el-select {
  --el-select-width: 280px;
}

:deep(.el-form-item__label) {
  color: black;
  /* margin-top: 10px; */
}

/* 日期选择器 */
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

:deep(.demo-datetime-picker .block) {
  /* padding: 30px 0; */
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

:deep(.inp) {
  width: 940px;
}
</style>